<template>
  <div class="yingmoo-column yingmoo-hot">
    <div class="column-left">
      <div class="column-navbar">
        <h1 class="column-title">
          <img class="column-icon" src="../assets/ym-index/icon-yun1.png" />
          <span class="column-name">热点推荐</span>
          <img class="column-arrow" src="../assets/ym-index/bg-arrow.png" />
        </h1>
      </div>
    </div>
    <el-tabs v-model="activeName" class="column-content" type="card" @tab-click="handleClick">
      <el-tab-pane class="column-list" label="热门" name="first">
        <li class="hot-item" v-for="(v,i) in hots1" :key="i">
          <figure class="hot-img"><img :src="v.imgpath" /></figure>
          <p class="hot-name" :title='v.name'>{{v.name}}</p>
          <p class="hot-price">￥{{v.price}}</p>
        </li>
      </el-tab-pane>
      <el-tab-pane class="column-list" label="公交" name="second">
        <li class="hot-item" v-for="(v,i) in hots2" :key="i">
          <figure class="hot-img"><img :src="v.imgpath" /></figure>
          <p class="hot-name" :title='v.name'>{{v.name}}</p>
          <p class="hot-price">￥{{v.price}}</p>
        </li>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  export default {
    name: 'ym-hot',
    data() {
      return {
      	requestAddr:this.GLOBAL.addr,
        activeName: 'first',
        hots1: [
          {
            name: '地铁媒体名称',
            price: '价格区间',
            imgUrl: require('@/assets/ym-index/ym-hot.png')
          }, {
            name: '地铁媒体名称',
            price: '价格区间',
            imgUrl: require('@/assets/ym-index/ym-hot.png')
          }, {
            name: '地铁媒体名称',
            price: '价格区间',
            imgUrl: require('@/assets/ym-index/ym-hot.png')
          }, {
            name: '地铁媒体名称',
            price: '价格区间',
            imgUrl: require('@/assets/ym-index/ym-hot.png')
          }, {
            name: '地铁媒体名称',
            price: '价格区间',
            imgUrl: require('@/assets/ym-index/ym-hot.png')
          }, {
            name: '地铁媒体名称',
            price: '价格区间',
            imgUrl: require('@/assets/ym-index/ym-hot.png')
          }, {
            name: '地铁媒体名称',
            price: '价格区间',
            imgUrl: require('@/assets/ym-index/ym-hot.png')
          }, {
            name: '地铁媒体名称',
            price: '价格区间',
            imgUrl: require('@/assets/ym-index/ym-hot.png')
          }
        ],
        hots2: [
          {
            name: '地铁媒体名称',
            price: '价格区间',
            imgUrl: require('@/assets/ym-index/ym-hot2.png')
          }, {
            name: '地铁媒体名称',
            price: '价格区间',
            imgUrl: require('@/assets/ym-index/ym-hot2.png')
          }, {
            name: '地铁媒体名称',
            price: '价格区间',
            imgUrl: require('@/assets/ym-index/ym-hot2.png')
          }, {
            name: '地铁媒体名称',
            price: '价格区间',
            imgUrl: require('@/assets/ym-index/ym-hot2.png')
          }, {
            name: '地铁媒体名称',
            price: '价格区间',
            imgUrl: require('@/assets/ym-index/ym-hot2.png')
          }, {
            name: '地铁媒体名称',
            price: '价格区间',
            imgUrl: require('@/assets/ym-index/ym-hot2.png')
          }, {
            name: '地铁媒体名称',
            price: '价格区间',
            imgUrl: require('@/assets/ym-index/ym-hot2.png')
          }, {
            name: '地铁媒体名称',
            price: '价格区间',
            imgUrl: require('@/assets/ym-index/ym-hot2.png')
          }
        ]
      }
    },
    mounted() {
        this.getHotList(2);//热门推荐的热点
        this.getHotList(3);//热门推荐的公交
  	},
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      getHotList:function(adid){
	  		this.$http({
					url: this.requestAddr+"/GetJson/get/adshow?adid="+adid+"&limit=8",
					method: 'JSONP',
				    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
					jsonp: 'callbackparam'
				}).then(res => {
					/*console.log(res.data);*/
					if(res.data != null){
						if(adid == 2){
							this.hots1 = res.data;							
						}
						if(adid == 3){
							this.hots2 = res.data;
						}
					}
				}).catch()
			}
    }
  }

</script>


<style scoped lang="less">
.yingmoo-hot {
  .column-left {
    height: 523px;
    background-image: url(../assets/ym-index/bg-left2.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-color: #036eb7;
  }
  .column-content {
    margin-left: 247px;
  }
  .column-list {
    height: 480px;
    display: flex;
    flex-wrap: wrap;
    .hot-item {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      line-height: 18px;
      .hot-img img {
        display: block;
        width:216px;
        height: 153px;
      }
      p{
        padding-top: 7px;
        text-align: center;
        font-size: 14px;
      }
      .hot-name{
        width: 216px;
        height: 20px;
        overflow: hidden;
        text-overflow: clip;
      }
      .hot-price{
        color: red;
      }
    }
  }
}

</style>
